<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 实现页面样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 800px;
            margin: 0 auto;
            display:flex;
        }

        .todo,
        .done {
            width: 50%;
            height: 100%;
        }

        .container h3 {
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: #333;
            color: #fff;

        }

        .nav {
            width: 800px;
            height: 100px;
            margin: 0 auto;
            display: flex;
            align-items: center;
        }
        .nav input {
            width: 600px;
            height: 50px;
        }
        .nav button {
            width: 200px;
            height: 50px;
            border: none;
            background-color: rgb(78, 203, 78);
            color: #fff;
        }

        .row {
            height: 50px;
            display: flex;
            align-items: center;

        }

        .row input{
            margin: 0 10px;
        
        }
        .row span {
            width: 300px;
        }
        .row button {
            width: 50px;
            height: 40px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <input type="text">
        <button>新建按钮</button>
    </div>
    <div class="container">
        <div class="todo">
             <h3>未完成</h3>
            
        </div>
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>
</body>
<script>
// 实现页面行为

    //实现新增任务
    var addTaskBtn = document.querySelector('.nav button');
    addTaskBtn.onclick = function() {
        //1、获取到任务内容的输入框
        var input=document.querySelector('.nav input');
        //2、获取到输入框的内容
        var taskContent=input.value;
        //3、根据内容新建一个元素节点
        var row=document.createElement('div');
        row.className='row';
        var checkbox=document.createElement('input');
        checkbox.type='checkbox';
        var span = document.createElement('span');
        span.innerHTML=taskContent;
        var button = document.createElement('button');
        button.innerHTML='删除';
        row.appendChild(checkbox);
        row.appendChild(span);
        row.appendChild(button);
        //4、把新节点插入到todo中
        var todo = document.querySelector('.todo');
        todo.appendChild(row);
        //点击复选框后将元素放到“已完成”
        //5、给checkbox注册点击事件
        checkbox.onclick = function() {
            var row=this.parentNode;
            if(this.checked){
                var target = document.querySelector('.done');
            }else{
                var target = document.querySelector('.todo');
            }
            target.appendChild(row);
        }
        //点击删除按钮删除该任务
        //6、给删除按钮注册点击事件
        button.onclick = function(){
            var row=this.parentNode;
            var grandParent=row.parentNode;
            grandParent.removeChild(row);
        }
    }
</script>
</html>